import styled from 'styled-components'

import border from '../../assets/theme/border'

import { themeColor } from '../../assets/theme/themeColor'

 const TabBarContainer = border({
     component:styled.div`
                height:.99rem;
                width:100%;
                ul{
                    width:100%;
                    height:100%;
                    display:flex;
                    justify-content:space-around;
                    li{
                        a{  
                            display:flex;
                            height:100%;
                            flex-direction:column;
                            justify-content:center;
                            color:#BBBBBB;
                            &.active{
                                color:${themeColor}
                            }
                            i{
                                font-size:.48rem;
                                text-align:center;
                            }
                            span{
                                font-size:.24rem;
                            }
                        }
                    }
                }
            `,
            width:'1px 0 0 0',
            style:'solid',
            color:'#ccc',
            radius:0,

 })
 
 
export default TabBarContainer